<template>
  <el-container id="app" class="bgtu">
    <el-main style="padding:0px;" >
      <el-image fiy="contain" src="https://cdn.hterobot.com/xcx/banner@2x.png" ></el-image>
      <el-form class="main" size="medium" :model="form" ref="ruleForm" :rules="rules" label-width="0px">
        <el-form-item prop="phonenum">
          <el-input type="text" v-model="form.phonenum" placeholder="请输入手机号码">
            <svg slot="prefix" class="icon" aria-hidden="true">
              <use xlink:href="#iconshouji" />
            </svg>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码">
            <svg slot="prefix" class="icon" aria-hidden="true">
              <use xlink:href="#iconmima" />
            </svg>
          </el-input>
        </el-form-item>
        <el-form-item prop="yzm">
          <el-input type="text" v-model="form.yzm" placeholder="请输入验证码">
            <svg slot="prefix" style="margin-top: 13px;" class="icon" aria-hidden="true">
              <use xlink:href="#iconmima" />
            </svg>
            <el-button
              slot="append"
              type="primary"
              round
              @click="getyzm"
              v-text="text"
              :disabled="disabled"
            ></el-button>
          </el-input>
        </el-form-item>
        <div class="form-group">
          <button type="button" class="btn btn-primary btn-block rounded-pill" @click="submit">绑定</button>
        </div>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import {
  asyncchangestudentopenid,
  asyncgetstudentyzm
} from "../plugins/api.js";
export default {
  name: "answer",
  data() {
    return {
      disabled: false,
      timer: Object,
      time: 60,
      form: {
        openid: "",
        phonenum: "",
        unionid: "",
        yzm: "",
        password: ""
      },
      text: "获取",
      rules: {
        password: [{ required: true, message: "不能为空", trigger: "blur" }],
        phonenum: [
          {
            required: true,
            pattern: new RegExp(/^1[3456789]\d{9}$/),
            message: "请填写正确手机号",
            trigger: "blur"
          }
        ],
        yzm: [
          {
            required: true,
            min: 4,
            max: 4,
            message: "验证码不正确",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    async submit() {
      this.form.openid = this.GetQueryString("openid");
      this.form.unionid = this.GetQueryString("unionid");
      this.$refs["ruleForm"].validate(async valid => {
        if (valid) {
          try {
            await asyncchangestudentopenid(this.form);
            this.$router.push("/sess");
          } catch (err) {
            this.$message({
              showClose: true,
              message: err,
              type: "error"
            });
          }
        }
      });
    },
    async getyzm() {
      const { form } = this;
      var reg = new RegExp(/^1[3456789]\d{9}$/);
      if (!reg.test(form.phonenum)) {
        this.$message({
          message: "手机格式不正确 !",
          type: "warning"
        });
        return;
      }
      try {
        await asyncgetstudentyzm({ phonenum: form.phonenum });
        this.disabled = !this.disabled;
        this.timer = setInterval(this.hc, 1000);
      } catch (err) {
        this.$message({
          showClose: true,
          message: err,
          type: "error"
        });
      }
    },
    hc() {
      var a = this.time;
      this.time--;
      this.text = a;
      if (a == 0) {
        clearInterval(this.timer);
        this.time = 60;
        this.text = "获取";
        this.disabled = !this.disabled;
      }
    },
    GetQueryString(name) {
      const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      const r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return r[2];
      } else {
        return "";
      }
    }
  }
};
</script>

<style scoped>

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.main {
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>

<style>
.el-input__inner {
  border-color: #ffffff !important;
  border-bottom-color: #dfdfdf !important;
}
.el-input-group__append {
  border-color: #ffffff !important;
  border-bottom-color: #dfdfdf !important;
  background-color: #007bff;
  color: #fff;
  background-color: #007bff;
  border-radius: 20px;
}
</style>